<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入本地的jquery库 -->
    <script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script>
    <title>验证码实例</title>
</head>
<body>
    <!-- 用来显示后台传来校验码输入是否正确 -->
    {% for message in get_flashed_messages() %}
        <div class=flash>{{ message }}</div>
    {% endfor %}
    <!-- 表单的action为主程序中的checkVerificationCode路由 -->
    <form action="/checkVerificationCode" method="POST">
        <div style="font-size: medium">
            <label>请输入下面图片中的验证码：</label><br>
            <input name = "user_input_code" placeholder="请输入您看到的验证码">
            <!-- 通过url_for('getVerificationCode')获取验证码图片
            通过a标签的id值refresh_img来触发click程序，以更新验证码 -->
            <a href="#" id = "refresh_img"><img src="{{ url_for('getVerificationCode') }}" id="codeImage">换一张<img src="static/refresh.png" style="width:18px;height:15px;" alt="点击更换验证码"></a>
            <br>
            <button type="submit">确认</button>
        </div>
    </form>
</body>
</html>
<script>
    $('#refresh_img').click(function(){
        // 通过随机数函数来实现更换验证码
        $('#codeImage').attr('src','{{url_for("getVerificationCode")}}?'+Math.random());
    })
</script>